﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>酷居科技抽奖活动配置页面</title>

    <link href="../css/jquery.dataTables.css" rel="stylesheet" />
    <link href="../library/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="../css/scratchsettings.css" rel="stylesheet" />
    <script src="../javascript/library/jquery-1.11.3.min.js"></script>
    <script src="../javascript/library/jquery.dataTables.min.js"></script>
    <script src="../library/bootstrap/js/bootstrap.min.js"></script>
    <script src="../library/avalon/avalon.min.js"></script>
    <script src="../library/JSON-js-master/json2.js"></script>
    <script>
        avalon.ready(function () {
            var model = avalon.define("test", function (vm) {
                vm.json = {};

                vm.selectel = { Prize: "", Description: "", Price: "", Count: "" };
                vm.select = function (el) {
                    vm.selectel = el;
                };

                vm.updateawared = function () {
                    for (var i = 0 ; i < vm.json.Awards.length; i++) {
                        var award = vm.json.Awards[i];
                        if (award.Prize == vm.selectel.Prize) {
                            award.Description = vm.selectel.Description;
                            award.Price = vm.selectel.Price;
                            award.Count = vm.selectel.Count;
                            break;
                        }
                    }
                };
            });

            $.getJSON("../controller/scrath.ashx", { "action": "getprizesetting" }, function (json) {
                model.json = json;
                avalon.scan();
            }, "json");

            $('#tableaward').dataTable({
                scrollX: true,
                scrollCollapse: true,
                "paging": false,
                "ordering": false,
                "info": false,
                "searching": false,
                "dom": '<"top"i>rt<"bottom"flp><"clear">',
                "oLanguage": {
                    "oPaginate": {
                        "sNext": "下一页",
                        "sPrevious": "上一页",
                    },
                    "sZeroRecords": "没有数据",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sSearch": "过滤:",
                }
            });

            $("#addprize").click(function () {
                $('#myModal').modal('toggle');
                model.updateawared();
            });

            $("#saveprize").click(function () {

                var list = [];
                for (var i = 0; i < model.json.Awards.length; i++) {
                    var award = model.json.Awards[i];

                    list.push({
                        "prize": award.Prize,
                        "price": award.Price,
                        "description": award.Description,
                        "count": award.Count
                    });
                }

                $.post("../controller/scrath.ashx?action=saveprizesetting", {
                    "starttime": model.json.StartTime, "endtime": model.json.EndTime,
                    "introductions": model.json.Introductions.toString(),
                    "interpretation": model.json.Interpretation.toString(),
                    "awards": JSON.stringify(list).toString(),
                }, function (result) {
                    if (result)
                    {
                        alert("保存失败！" + result);
                    }
                    else {
                        alert("保存成功！");
                    }
                });
            });
        });
    </script>

</head>
<body ms-controller="test">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">酷居科技</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="../pages/scratchsettings.html">奖品配置 <span class="sr-only">(current)</span></a></li>
                    <li><a href="../pages/prizelist.html">出奖顺序</a></li>
                    </li>
                </ul>

            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div id="dvawardcontainer">
        <table class='display' cellspacing='0' id='tableaward' width="100%">
            <thead>
                <tr>
                    <th>奖品</th>
                    <th>内容</th>
                    <th>价值</th>
                    <th>数量</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr ms-repeat="json.Awards">
                    <td>{{el.Prize}}</td>
                    <td>{{el.Description}}</td>
                    <td>{{el.Price}}</td>
                    <td>{{el.Count}}</td>
                    <td>
                        <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-default" ms-click="select(el)"><span class="glyphicon glyphicon-edit"></span>编辑</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="form-group">
            <label for="interpretation">活动解释权</label>
            <input id="interpretation" class="form-control" ms-duplex="json.Interpretation" placeholder="活动解释权">
        </div>
        <div class="form-group">
            <label for="introductions0">祝您好运</label>
            <input id="introductions0" class="form-control" ms-duplex="json.Introductions[0]" placeholder="祝您好运">
        </div>
        <div class="form-group">
            <label for="introductions1">活动地点</label>
            <input id="introductions1" class="form-control" ms-duplex="json.Introductions[1]" placeholder="活动地点">
        </div>
        <div class="form-group">
            <label for="introductions2">活动时间</label>
            <input id="introductions2" class="form-control" ms-duplex="json.Introductions[2]" placeholder="活动时间">
        </div>
        <div class="form-group">
            <label for="starttime">领奖开始时间</label>
            <input id="starttime" class="form-control" ms-duplex="json.StartTime" placeholder="领奖开始时间">
        </div>
        <div class="form-group">
            <label for="endtime">领奖结束时间</label>
            <input id="endtime" class="form-control" ms-duplex="json.EndTime" placeholder="领奖开始时间">
        </div>
        <button type="button" class="btn btn-default" id="saveprize">保存</button>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑奖品</h4>
                </div>
                <div class="modal-body">
                    <form id="conZFJL">
                        <div class="form-group">
                            <label for="formDescription">内容</label>
                            <input type="text" class="form-control" id="formDescription" ms-duplex="selectel.Description">
                        </div>
                        <div class="form-group">
                            <label for="formPrice">价值</label>
                            <input type="text" class="form-control" id="formPrice" ms-duplex="selectel.Price">
                        </div>
                        <div class="form-group">
                            <label for="formCount">数量</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="formCount" ms-duplex="selectel.Count" name="count">
                                <span class="input-group-addon">个</span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" id="addprize">确认添加</button>
                </div>
            </div>
        </div>
    </div>


</body>
</html>
